<template>
  <div class="basetable">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <!-- 点击触发add方法 -->
      <div style="display: flex; margin-bottom: 25px">
        <el-button
          size="small"
          type="primary"
          @click="add"
          style="margin-right: 20px"
          >添加人员</el-button
        >
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="handsuccess"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          accept=".xls,.xlsx"
          style="display: flex"
          :show-file-list='false'
        >
          <el-button size="small" type="primary">导入</el-button>
          <template #tip>
            <a href="http://px.0123china.cn/static/扶贫档案导入Excel模板.xls" class="el-upload__tip" style="margin-left: 20px;color:#409eff" >
              下载导入模板
            </a>
          </template>
        </el-upload>
      </div>
      <span class="spansearch">姓名</span>
      <el-input
        class="serrchInput"
        size="small"
        placeholder="输入姓名搜索"
        style="width: 100px; margin-left: 16px"
        @input="searchClick"
        clearable
        v-model="input1"
      >
      </el-input>

      <span class="spansearch">身份证号</span>
      <el-input
        class="serrchInput"
        size="small"
        placeholder="输入身份证号"
        style="width: 200px; margin-left: 16px"
        @input="searchClickuser_code"
        clearable
        v-model="inputuser_code"
      >
      </el-input>

      <span class="spansearch">手机号</span>
      <el-input
        class="serrchInput"
        size="small"
        placeholder="输入手机号"
        style="width: 200px; margin-left: 16px"
        @input="searchClickmobile"
        clearable
        v-model="inputmobile"
      >
      </el-input>
    </div>
    <div class="tableMain">
      <el-table
        :data="
          userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          width="100"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="user_code" label="身份证号"></el-table-column>
        <el-table-column prop="mobile" label="手机号码"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <!-- 点击编辑进入编辑页面进行编辑表格数据 -->
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 下面这个用来设置点击添加按钮的弹出框，里面可以进行嵌套表格来展示弹出的表格信息,使用下面的:visible.sync来控制显示与否 -->
    <el-dialog
      title="基本信息"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      width="850px"
    >
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form" ref="form">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="姓名"
              :label-width="formLabelWidth"
              prop="username"
              :rules="[{ required: true, message: '请填写姓名' }]"
            >
              <el-input v-model="form.username" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="年龄"
              :label-width="formLabelWidth"
              prop="username"
              :rules="[{ required: true, message: '请填写年龄' }]"
            >
              <el-input v-model="form.age" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="身份证号"
              :label-width="formLabelWidth"
              prop="username"
              :rules="[{ required: true, message: '请填写身份证号' }]"
            >
              <el-input v-model="form.user_code" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="手机号"
              :label-width="formLabelWidth"
              prop="username"
              :rules="[{ required: true, message: '请填写手机号' }]"
            >
              <el-input v-model="form.mobile" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="地址"
              :label-width="formLabelWidth"
              prop="username"
              :rules="[{ required: true, message: '请填写地址' }]"
            >
              <el-input v-model="form.address" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改人员" width="850px" :visible.sync="dialogFormVisiblea">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="姓名"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.username" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="年龄"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.age" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="身份证号"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.user_code" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="手机号"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.mobile" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              style="margin-bottom: 20px"
              label="地址"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.address" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="updatea">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList: [],
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      userList: [],
      //   表格的数据
      tableData: [],
      search: "",
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      formLabelWidth: "80px",
      // 设置form用于进行添加的时候绑定值
      form: {},
      value6: "",
      currentPage3: 1,
      currentIndex: "",
      addfq: [],
      input1: "", //搜索
      inputuser_code: "", //搜索
      inputmobile: "", //搜索
    };
  },
  created() {
    // this.updatea();
    this.fpLists();
  },
  methods: {
    handsuccess(res, file) {
      console.log(res, file);
      this.loadfile(file.raw);
    },
    async loadfile(data) {
      console.log(data);
      var fd = new FormData();
      fd.append("ar_file", data);
      console.log(fd);
      let res = await this.$api.home.loadfile(fd);
      if(res.data.code == 200){
        this.$message({
              type: "success",
              message: res.data.data
            });
            this.fpLists();
      }else{
        this.$message({
              message: "上传失败",
              type: "error"
            });
      }
      console.log(res);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //扶贫列表
    async fpLists() {
      this.userList = (await this.$api.home.archiveLists()).data.data;
    },
    //添加扶贫人员
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      this.form = {
        username: "",
      };
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    //关闭dialog清空值
    closeDialog() {
      this.form.username = "";
      this.form.age = "";
      this.form.user_code = "";
      this.form.mobile = "";
      this.form.address = "";
    },
    //添加人员
    async update() {
      this.dialogFormVisiblea = false;
      let add = (
        await this.$api.home.archiveAdd({
          username: this.form.username,
          address: this.form.address,
          mobile: this.form.mobile,
          user_code: this.form.user_code,
          age: this.form.age,
        })
      ).data;
      if (add.code == 200) {
        this.dialogFormVisible = false;
        this.userList.push(this.form);
        this.fpLists();
        this.$notify({
          title: "成功",
          message: add.msg,
          type: "success",
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: add.msg,
        });
      }
    },
    //人员编辑
    async updatea() {
      let a = (
        await this.$api.home.archiveUpdate({
          username: this.form.username,
          address: this.form.address,
          mobile: this.form.mobile,
          user_code: this.form.user_code,
          age: this.form.age,
          id: this.form.id,
        })
      ).data;
      if (a.code == 200) {
        this.dialogFormVisiblea = false;
        this.$notify({
          title: "成功",
          message: a.msg,
          type: "success",
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: a.msg,
        });
      }
    },

    handleEdit(index, row) {
      // 将数据的index传递过来用于实现数据的回显
      this.form = this.userList[index];
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisiblea = true;
    },
    //人员删除
    async handleDelete(index, row) {
      const params = {
        id: row.id,
      };
      this.$confirm("此操作会会将学员信息删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let delTrainee = await this.$api.home.archiveDel(params);
          if (delTrainee.data.code == 200) {
            this.userList.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisiblea = false;
    },
    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter((e) => {
          return e.username.match(searchText);
        });
        this.userList = list;
      } else {
        this.fpLists();
      }
    },
    //搜索
    searchClickuser_code() {
      let searchText = this.inputuser_code;
      let list = [];
      if (searchText) {
        list = this.userList.filter((e) => {
          return e.user_code.match(searchText);
        });
        this.userList = list;
      } else {
        this.fpLists();
      }
    },
    //搜索
    searchClickmobile() {
      let searchText = this.inputmobile;
      let list = [];
      if (searchText) {
        list = this.userList.filter((e) => {
          return e.mobile.match(searchText);
        });
        this.userList = list;
      } else {
        this.fpLists();
      }
    },
  },
};
</script>
<style lang="less" scope>
.el-upload-list {
  margin: -7px;
  padding: 0px;
  list-style: none;
  padding-left: 20px;
}
.inputedit {
  margin-bottom: 20px;
}
.serrchInput {
  width: 20%;
}
.tableMain {
  margin-top: 10px;
}
.page {
  float: left;
  margin-top: 10px;
}
//搜索框文字
.spansearch {
  color: #409eff;
  font-size: 15px;
  margin-left: 20px;
}

.el-input--suffix {
  .el-input-group__append {
    border-color: #1890ff;
    .btnSearch {
      background: #1890ff;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>